<template>
  <div class="list" ref='wrapper'>
	  <div>
	  <div class="content_one" ref='content_one'>
		  <div class="content_one_title">当前</div>
		  <div class="content_one_btn" @click='CityBtn'>{{this.$store.state.city}}</div>
	  </div>
	  <div class="content_two" ref='content_two'>
		  <div class="content_two_title">热门城市</div>
		  <div class="content_two_list" >
			  <div class="content_two_btn" v-for='item of hotCities' :key='item.id' @click='CityBtn'>{{item.name}}</div>
		  </div>
	  </div>
	  <div class="content_three" >
		  <div class="wrapper" v-for='(item,key) of cities' :key='key' ref='content_three'>
			  <div class="content_three_title" >{{key}}</div>
			  <div class="content_three_list">
			  		<div class="content_three_btn" v-for='innerItem of item' :key='innerItem.id' @click='CityBtn'>{{innerItem.name}}</div>
			  </div>
		  </div>
	  </div>
	  </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'

export default {
  name: 'locationList',
  data(){
	  return{
		  city:'',
		  reInfor:'',
		  postCity:''//选择的城市名称
	  }
  },
  props:{
	  cities:Object,
	  hotCities:Array,
	  alphabetInfor:String
  },
  methods:{
	  CityBtn(e){
		  this.postCity=e.target.innerText
		  this.$store.commit('CityBtn',this.postCity)
		  this.$router.go(-1)
	  }
  },
  watch:{
	  alphabetInfor(e){
		  this.reInfor=e
		  let aaa=this.$refs.content_one.offsetTop
		  let bbb=this.$refs.content_two.offsetTop
		  if(this.reInfor=="当前"){
			window.scrollTo(0,0) 
		  }
		  else if(this.reInfor=="热门"){
			window.scrollTo(0,bbb-aaa)
		  }else{
			  let a=0;
			  for(let i in this.cities){
				  a++;
				  if(i==this.reInfor){
					  let ccc=this.$refs.content_three[a-1].offsetTop
					  window.scrollTo(0,ccc-aaa)
				  }
			  }
		  }
	  }
  },

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.list
	background:#f2f4f7
	padding-bottom:0.4rem
	.content_two_list,.content_three_list
		overflow:hidden
	.content_one,.content_two
		padding-top:0.4rem
		padding-left:.2rem
	.content_one_title,.content_two_title,.content_three_title
		padding-left:.1rem
		color:#777
		font-weight: 400
	.content_one_btn,.content_two_btn,.content_three_btn
		background:#fff
		border-radius: .08rem
		border: 1px solid #ddd
		text-align:center
		height:0.6rem
		line-height:0.6rem
		color:#666
		margin-top:0.2rem
	.content_one_btn
		text-align:left
		padding-left:0.4rem
	.content_two_btn,.content_three_btn
		width:26%
		float:left
		margin-right:0.3rem
	.wrapper
		padding-top:0.4rem
		padding-left:.2rem
</style>
